[#ftl]
[#--include "../../util.ftl"/--]
[@define "agile.form.Button" "agile.form._FormWidget"]
	category:"Button Component"
	,widgetName:"Button"
	[#assign templateString][#compress]			
 		<div class="agileComponent agileButton">
			<span data-dojo-attach-point="delegate" data-dojo-type="dijit.form.Button"></span>				
			<table data-dojo-attach-point="editorNode" style="display:none">
				<tr>
					 <td style='width:10px;'><img class='dijitEditorIcon dijitEditorIcon{parameters.iconClass}' data-dojo-attach-point='iconNode'/></td>
					 <td align='left'><div data-dojo-type='dijit.InlineEditBox' data-dojo-attach-point='label'>{parameters.label}</div></td>						
				</tr>
			</table>			
		</div>
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"
	,_items:{
		"Cancel":{label:"Cancel",iconClass:"Cancel",accelKey:"Ctrl + Z"}
		,"Copy":{label:"Copy",iconClass:"Copy",accelKey:"Ctrl + C"}
		,"Cut":{label:"Cut",iconClass:"Cut",accelKey:"Ctrl + X"}
		,"Delete":{label:"Delete",iconClass:"Delete",accelKey:"Ctrl + D"}
		,"Paste":{label:"Paste",iconClass:"Paste",accelKey:"Ctrl + P"}
		,"Redo":{label:"Redo",iconClass:"Redo",accelKey:"Ctrl + R"}
		,"Save":{label:"Save",iconClass:"Save",accelKey:"Ctrl + S"}
		,"Undo":{label:"Undo",iconClass:"Undo",accelKey:"Ctrl + U"}
	}		
	,styleConstraints:agile.delegate(agile.form._FormWidget.prototype.styleConstraints,{
		"height": {_ignore:true}
	})
	,events:agile.delegate(agile.form._FormWidget.prototype.events,{
		"onClick": {_ignore:false}
	})
	,attributes:agile.delegate(agile.form._FormWidget.prototype.attributes,{
		showLabel:lang.mixin({},agile.BooleanMetadata,{	
			label:"i18n_show_label"
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){											
				widget.delegate.set(name,value);		
				widget.metadata(this.metadataCategory+"."+name,value);
			}
		})

		,iconClass:lang.mixin({},agile.ComboMetadata,{
			label:"i18n_icon_class"					
			,initOptions:function(){
				var options = [];
				var items = agile.form.Button.prototype._items;
				for(var name in items){
					//this.options[name] = items[name].iconClass;
					options.push({"value":items[name].iconClass});
				};
				return options;
			}
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
				if(!value){
					style.set(widget.iconNode,"visibility","hidden");
					widget.delegate.set("iconClass","");
				}else{
					style.set(widget.iconNode,"visibility","visible");
					domClass.replace(widget.iconNode,value);
					widget.delegate.set("iconClass",value);
				}
				widget.metadata(this.metadataCategory+"."+name,value);
				//agile.form.Button.prototype.attributes.iconClass.editorWidget.set("value",value);					
			}
			,parse:function(value){
				if(value){
					return "dijitEditorIcon dijitEditorIcon"+value;
				}
				return value;
			}
			,format:function(value){
				if(value){
					return value.replace("dijitEditorIcon dijitEditorIcon","");
				}
				return value;
			}
		})
		,label:lang.mixin({},agile.ComboMetadata,{
			label:"i18n_label"
			,initOptions:function(){
				var options = [];
				var items = agile.form.Button.prototype._items;
				for(var name in items){
					//this.options[name] = items[name].label;
					options.push({"value":items[name].label});
				};
				return options;
			}
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){					
//					widget.metadata(name,value);
				widget.metadata("parameters."+name,value);
				widget.label.set("value",value);
				widget.delegate.set("label",value);					
				
				widget.metadata("showLabel",value != "");
				widget.delegate.set("showLabel",value != "");
[#--					
//					//change the icon and accelKey accordingly for pre-defined items
//					var items = agile.form.Button.prototype._items;
////					var category = agile.form.Button.prototype.category;
//					for(var e in items){						
//						if(items[e].label == value){
////							agile.form.Button.prototype.attributes.iconClass.onValueChange(widget,"iconClass",items[e].iconClass);
////							agile.form.Button.prototype.attributes.accelKey.onValueChange(widget,"accelKey",items[e].accelKey);		
//							topic.publish("agile.widget.changed",["","iconClass",items[e].iconClass,null]);
//							break;
//						}
//					};
--]					
				}
			})											
		})
	,initDefaultMetadata:function(){
		this.metadata("parameters.iconClass","");
		 this.metadata("parameters.label","Click me!");
		 this.metadata("parameters.showLabel",true);
		 this.metadata("widgetName",this.widgetName);
		 this.metadata("style.width",80);
	}
	
	,init:function(){	
		this.own(
			aspect.after(this,"onDeselected",lang.hitch(this,function(){				
//				this.showEditor(false);
			}))			
			,aspect.after(this.label,"onChange",lang.hitch(this,function(newValue){										
				topic.publish("agile.widget.changed",this.category,"label",newValue);					
				this.metadata("parameters.label",newValue);
				this.delegate.set("label",newValue);
//				this.showEditor(false);
			}),true)
		);
		agile.stopInlineEditBox(this.label);
		
//		this.own(on(this.delegate.domNode,"dblclick",lang.hitch(this,function(event){	
//			this.showEditor(true);	
//			event.stopPropagation();
//		})));
		
//		if(agile.form.Button.prototype.editorTooltip == null){
//			agile.form.Button.prototype.editorTooltip = new dijit.Tooltip({label: "Double click to show the edit pane"});
//		}
//		agile.form.Button.prototype.editorTooltip.addTarget(this.delegate.domNode);
	}
	
//	,showEditor:function(isVisible){
//		if(isVisible){
//			style.set(this.delegate.domNode,"display","none");
//			style.set(this.editorNode,"display","block");
//			
//			var marginBox = agile.calcSize(this.editorNode);			
//			style.set(this.domNode,{width:marginBox.w +"px",height:marginBox.h +"px"});
//		}else{
//			style.set(this.delegate.domNode,"display","block");
//			style.set(this.editorNode,"display","none");
//			
//			var marginBox = agile.calcSize(this.delegate.domNode);			
//			style.set(this.domNode,{width:marginBox.w +"px",height:marginBox.h +"px"});
//		}
//	}
//	,computeSize:function(){			
//		var marginBox = agile.calcSize(this.delegate.domNode);
//		
//		this.style1("width",Math.floor(marginBox.w));
//		this.style1("height",Math.floor(marginBox.h));
//	}
[/@]